<template>
  <div class="iframe-box" id="iframe-box" style="position: relative;background: #fff">
     <div id="remove" class="buttom" @click="fullFun" v-if="showFullBtn">
      </div>
    <iframe :src="iframeSrc" class="iframe" ref="iframe"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iframeSrc: null,
      initX: null,
      initY: null,
      isFull: false,
      removeDom: document.querySelector('#remove')
    };
  },
  mounted() {
    this.getIframeSrc();
    window.tt = this;
    if (this.showFullBtn) {
      let parentBox = document.querySelector('.iframe-box')
      parentBox.addEventListener('mouseenter', (e) => {
        if (this.isFullScreen()) {
          document.querySelector('#remove').style.display = 'none'
        } else {
          this.isFull = false
          document.querySelector('#remove').style.display = 'block'
        }
      })
      parentBox.addEventListener('mouseleave', (e) => {
        document.querySelector('#remove').style.display = 'none'
      })
    }
  },
  // props: ["routerPath", "src", 'title'], //后面废弃 routerPath, 使用 src
  props: {
    routerPath: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    showFullBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    getTop(el) {
      if (el.offsetParent) {
        return this.getTop(el.offsetParent) + el.offsetTop
      } else {
        return el.offsetTop
      }
    },
    getLeft(el) {
      if (el.offsetParent) {
        return this.getLeft(el.offsetParent) + el.offsetLeft
      } else {
        return el.offsetLeft
      }
    },
    getIframeSrc(route = this.$route) {
      let url = this.src || this.routerPath;
      let needToken;
      if (!url && route) {
        url = route.params.src || route.query.src || null;
        needToken = route.params.needToken || route.query.needToken || undefined;
      }
      if (needToken) {
        $http.get(decodeURIComponent(needToken)).then(() => {
          this.iframeSrc = decodeURIComponent(url);
          this.updated()
        });
      } else {
        this.iframeSrc = decodeURIComponent(url);
        this.updated()
      }
    },
    updated() {
        if (this.$refs.iframe) {
            // IE
            if (this.$refs.iframe.attachEvent) {
                this.$refs.iframe.attachEvent('onload', () => {
                    this.iLoading = false;
                    this.$emit('iframeOnload')
                });
            } else {
                this.$refs.iframe.onload = () => {
                    this.iLoading = false;
                    this.$emit('iframeOnload')
                };
            }
        }
    },
    isFullScreen() {
      return document.fullscreenElement || document.msFullcreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false
    },
    fullFun() {
      document.querySelector('#remove').style.display = 'none'
      this.isFull = true
      let iframe = document.getElementsByClassName('iframe-box')[0]
      let requestMethod = iframe.requestFullScreen || iframe.webkitRequestFullScreen || iframe.mozRequestFullScreen
      if (requestMethod) {
        requestMethod.call(iframe)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        var wscript = new window.ActiveXObject('WScript.Shell')
        if (wscript !== null) {
          wscript.SendKeys('{F11}')
        }
      }
    },  
  },
  watch: {
    $route(val) {
      this.getIframeSrc(val);
    }
  }
};
</script>
<style lang="less">
.iframe-box {
  height: 100%;
  .iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
}
#remove {
  display: none;
  position: absolute;
  background:url(../../asset/images/btn.svg);
  right: 30px;
  top: 200px;
  width: 75px;
  height: 75px;
  z-index: 99999;

}
</style>

